<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>10 表单验证</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

	#prompt{
		font-size: 12px;
		color: darkgray ;
	}
	#score{
		border:1px solid darkgray;
	}
	
	.right{
		background:url("images/content_BG.png") no-repeat;
		background-size: 21px 520px;
		background-position: 8px -347px;
		padding-left: 30px;
		color: lightgreen !important;
	}

	.err{
		background:url("images/content_BG.png") no-repeat;
		background-size: 21px 520px;
		background-position: 8px -388px;
		padding-left: 30px;
		color: red !important;
	}
	

</style>
</head>
<body>
		
	<div id="box">
		<label for="score">您的成绩:</label>
		<input type="text" placeholder="请输入你的成绩分数" id="score">
		<span id="prompt">span>输入成绩</span>
	</div>

<script type="text/javascript">
	
	function $(id){
		return typeof id=== 'string'?document.getElementById(id):null;
	}
	//input输入框失去焦点时
	$('score').onblur=function(){
		// 1.获取输入内容以及输入内容类型
		var value=parseFloat(this.value)
		console.log( typeof value)

		// 2.验证,inNaN()验证数值的false和true
		console.log(isNaN(value))
		if(isNaN(value)){
			$('prompt').innerHTML='输入的成绩不正确'
			this.style.borderColor="red"
			// $('prompt').setAttribute('class','err')
			$('prompt').className='err'
		}else if(value>=0 && value<=100){
			$('prompt').innerHTML='输入的成绩符合规范·在0-100当中'
			$('prompt').className='right'
			this.style.borderColor="lightgreen"
		}else{
			// 超出成绩的范围提示
			$('prompt').innerHTML="成绩超出范围了"
			$('prompt').className="err"
			this.style.borderColor="red"
		}
	}

	//input输入框获取焦点时
	$('score').onfocus=function(){
		$('prompt').innerHTML="输入成绩"//文本重新设置
		$('prompt').className=""//类名设置为没有，回复原始状态

		$('score').style.borderColor="darkgray"//边框颜色为灰色
		$('score').style.outline="none"//边框外线为无
		$('score').value=""//清空score的值
	}




</script>


</body>
</html>